<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/header.css" />
	</head>
	

	<body>
		<header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<a id="openMenu" class="mui-icon mui-icon-right-nav mui-pull-right" style="color: white;line-height: 20px;">...</a>
			<h1 class="mui-title title-color">个人头像</h1>
		</header>

		<div class="mui-content" style="padding-left: 8%;padding-top: 40%;">
			<img id="img_myface" style="width: 350px;height:350px;" src="image/cat.jpg">
		</div>

		<div id="sheet-myface" class="mui-popover mui-popover-bottom mui-popover-action ">
			<!-- 可选择菜单 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a id="link_choosePhoto" href="#">选择照片</a>
				</li>
				<li class="mui-table-view-cell">
					<a id="link_svaePhoto" href="#">保存到本地</a>
				</li>
			</ul>
			<!-- 取消菜单 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#sheet-myface"><b>取消</b></a>
				</li>
			</ul>
		</div>


		<script src="js/app.js"></script>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()

			mui.plusReady(function() {
				var user = app.getUserGlobalInfo();
				var img_myface = document.getElementById("img_myface");

				if (user != null) {
					var faceImage = user.faceImage;
					if (app.isNotNull(faceImage)) {
						img_myface.src = faceImage;
					}
				}

				// 获取手机端可见屏幕的宽度和高度
				var imgWidth = document.body.clientWidth;
				var imgHeight = document.body.clientHeight;
				img_myface.width = imgWidth;
				img_myface.height = imgHeight;

				// 绑定选着菜单
				var openMenu = document.getElementById("openMenu");
				openMenu.addEventListener("tap", function() {
					mui("#sheet-myface").popover("toggle");
				})

				// 绑定选择照片的菜单按钮
				var link_choosePhoto = document.getElementById("link_choosePhoto");
				link_choosePhoto.addEventListener("tap", function() {
					plus.gallery.pick(function(path) {
						console.log(path);

						var user = app.getUserGlobalInfo();
						var id = null;
						if (user != null) {
							if (app.isNotNull(user.id)) {
								id = user.id
							} else {
								return;
							}
						}
						var serverUrl = app.serverUrl+"/u/upload?userId="+id;
						var task = plus.uploader.createUpload(serverUrl, {
								method: "POST"
							},
							function(t, status) {
								if (status == 200) {
									var url = t.responseText;
									console.log(url);
									document.getElementById("img_myface").setAttribute("src", url);
									
									app.showToast("上传成功", "success")
									user.faceImageBig = url;
									user.faceImage = url;
									app.setUserGlobalInfo(user);
									
									// 触发另一个webview的自定义事件，可以使用mui.fire()方法
									var meWebvie = plus.webview.getWebviewById("me.html");
									mui.fire(meWebvie,"refresh");
									
									mui.openWindow("me.html","me.html")
								} else {
									app.showToast("上传失败，请重新选择", "error");
								}
							});

						// 向任务中添加file对象
						task.addFile(path, {
							key: "file"
						});
						task.start();
					}, function(e) {
						console.log("取消选择图片");
					}, {
						filter: "image"
					});
					mui("#sheet-myface").popover("toggle");
				});

				// 绑定保存照片的照片按钮
				var link_svaePhoto = document.getElementById("link_svaePhoto");
				link_svaePhoto.addEventListener("tap", function() {
					
					plus.nativeUI.showWaiting("下载中...")
					
					var user = app.getUserGlobalInfo();
					var faceImage = user.faceImageBig;
					
					var dtast = plus.downloader.createDownload(faceImage,{},function(downloadFile,status){
						
						plus.nativeUI.closeWaiting();
						if(status == 200){
							var tempFile = downloadFile.filename;
							
							// 通过相册api保存到本地相册
							plus.gallery.save(tempFile,function(){
								app.showToast("保存照片成功！","success")
							})
						}else{
							app.showToast("下载错误...","error");
							console.log("下载错误...");
						}
						
					});
					// 启动下载测试
					dtast.start();
				})
			})
		</script>
	</body>

</html>
